<template>
	<div class="comment-wrap" v-if="commentData.length > 0">
		<h2 class="h2">评论 {{commentData.length}}</h2>
		<div class="comment-item" v-if="!item.parent" v-for="item of commentData" :key="item.kid">
			<div class="comment-primary">
				<div class="totor-img">
				<img :src="item.creator.headImgUrl" alt="" :class="['user-img']" >
				<div :class="{'isTotor': item.creator.userRole === '1' }"></div>
			</div>
				<div class="commit-content">
					<p class="user-name">{{item.creator.userNickName}}</p>
					<p class="comment-text">
						<!-- <span v-if="item.parent">回复<i class="text-point">{{item.parent.userNickName}}:</i></span>  -->
						{{item.content}}</p>
					<p class="comment-time">{{ item.createDate | transformTime }}</p>
				</div>
			</div>
			<div class="comment-assist">
				<div class="comment-assistcon">
					<span  :class="['iconfont', 'icon-like-new', {'cur': item.behaviorResult && item.behaviorResult.likeFlag  }]"></span>
					<p class="num">{{ item.statisticResult.likeCount | reformNum }}</p>
			</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'y-comment',
	props: {
		targetKid: String,
		targetType: String,
	},
	data() {
		return {
			commentData: {}
		}
	},
	async created() {
		let params = {
				pageNo: 1, 
				pageSize: 10, 
				targetKid: this.targetKid, 
				targetType: this.targetType
			}
		let commentRes = await this.$http.get(`/platform-behavior/v1.3/pb/comment-info/action/search-root`, {params});
		this.commentData = commentRes.data.data.entities;
	},
}
</script>

<style type="text/css" scoped>
@import "../../../css/var.css";
.comment-wrap {
	background: #fff;
	margin-top: 0.2rem;
	padding: 0 0.3rem 1.5rem;
}
.h2 {
	font-size: 0.36rem;
	color: #000;
	padding-top: 0.4rem;
}

.comment-item {
	display: flex;
	justify-content: space-between;
	margin-top: 0.4rem
}

.comment-primary {
	flex: 1;
	display: flex;
	align-items: flex-start;

	& .user-img {
		width: 0.64rem;
		height: 0.64rem;
		border-radius: 0.32rem;
		overflow: hidden;
		background: #eee;
	}

	& .totor-img {
		width: 0.64rem;
		height: 0.64rem;
		position: relative;
		margin-right: 0.2rem;
	}

	& .isTotor {
		position: absolute;
		width: 0.75rem;
		height: 0.85rem;
		top: -0.10rem;
		left: -0.07rem;
		background: url('../assets/totor_bg.png') no-repeat center;
		background-size: contain;
	}
	& .commit-content {
		flex: 1;
		font-size: 0.28rem;
		color: #000;
		& .user-name {
			margin-top: 0.15rem;
			line-height: 1;
			font-weight: 700;
		}

		& .comment-text {
			margin-top: 0.20rem;
			line-height: 0.4rem;
			& span {
				color: #999;	
				& .text-point {
					color: #000;
					font-weight: 700;
					margin: 0 0.06rem 0 0.1rem;
				}
			}
		}

		& .comment-time {
			margin-top: 0.2rem;
			font-size: 0.22rem;
			color: #999;
		}
	}
}

.comment-assist {
	width: 1.3rem;
	line-height: 1;
	text-align: right;
	& .icon-laud {
		margin-top: 0.15rem;
		display: block;
		font-size: 0.32rem;
		color: #000;
		&.cur {
			color: #ff6464;
		}
	}

	& .num {
		margin-top: 0.22rem;
		font-size: 0.2rem;
		color: #666;
	}

	& .comment-assistcon {
		display: inline-block;
		text-align: center;
	}
}

</style>